<template>
	<div class="login">
		<div class="login-box">
			<img src="@/assets/login-l.png" alt="" />

			<div class="login-form">
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
					<div class="login-form-title">
						<img src="@/assets/logo.png" alt="" style="width: 139px; height: 42px" />
					</div>

					<el-form-item prop="username">
						<el-input
							v-model="ruleForm.username"
							size="large"
							placeholder="请输入账号"
							:prefix-icon="User"
							style="margin-bottom: 20px" />
					</el-form-item>

					<el-form-item prop="password">
						<el-input
							v-model="ruleForm.password"
							show-password
							size="large"
							placeholder="请输入密码"
							:prefix-icon="Unlock"
							@keyup.enter="submitForm(ruleFormRef)"
							style="margin-bottom: 20px" />
					</el-form-item>

					<el-form-item>
						<el-button v-loading="state.loading" class="login-btn" type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="Login">
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import { User, Unlock } from '@element-plus/icons-vue'
	import { Ilogin } from '@/types/index'
	import { login } from '@/api/index'

	const router = useRouter()

	const state = reactive({
		loading: false
	})

	const ruleFormRef = ref<FormInstance>()

	const ruleForm: Ilogin = reactive({
		username: '',
		password: '',
	})

	const rules = reactive<FormRules>({
		username: [{ required: true, message: '必填', trigger: 'blur' }],
		password: [{ required: true, message: '必填', trigger: 'blur' }]
	})

	const submitForm = async (formEl: FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				state.loading = true
				try {
					const res = await login<Ilogin>(ruleForm)
					localStorage.setItem('token',res.data.id)
					localStorage.setItem('userInfo', JSON.stringify(res.data))
					router.push({path: '/staffManage'})
				} catch (error) {
					ElMessage({
						type: 'error',
						message: error as string
					})
				}
				state.loading = false
			} else {
				console.log('error submit!', fields)
			}
		})
	}
</script>

<style scoped lang="scss">
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 98vh;
		background-color: #333;

		.login-box {
			width: 1000px;
			height: 474.38px;
			border-radius: 8px;
			display: flex;

			img {
				width: 60%;
				height: auto;
			}

			.login-form {
				background: #ffffff;
				width: 40%;
				border-radius: 0px 8px 8px 0px;
				display: flex;
				justify-content: center;
				align-items: center;

				.login-form-title {
					height: 36px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 40px;
				}

				.el-form {
					width: 50%;
					::v-deep .el-input__wrapper {
						box-shadow: none;
						border-bottom: 1px solid #e9e9e8;
						border-radius: 0;
						font-size: 25px;
						font-weight: 400;
						color: #333333;
						height: 32px;
						line-height: 32px;
						padding: 0;
					}

					::v-deep .el-input__inner {
						border: 0;
						border-radius: 0;
						font-size: 14px;
						font-weight: 400;
						color: #333333;
						height: 32px;
						line-height: 32px;
					}

					::v-deep .el-input__suffix-inner {
						display: none;
					}

					.login-btn {
						width: 100%;
						border-radius: 17px;
						padding: 11px 20px !important;
						margin-top: 10px;
						font-weight: 500;
						font-size: 14px;
						border: 0;
						background-color: #ffc200;
						color: #333333;
					}

					.el-button--primary:focus,
					.el-button--primary:hover {
						background: #fdd24c;
						border-color: #fdd24c;
						color: #333333;
					}
				}
			}
		}
	}
</style>
